<template>
  <div>
   <ul class="mui-table-view" v-for="item in list" :key="item.id">
      <li class="mui-table-view-cell mui-media">
          <router-link :to="'/home/newslist/newsinfo/'+item.id">
              <img class="mui-media-object mui-pull-left" :src="item.img_url">
              <div class="mui-media-body">
                  <h5>{{item.title}}</h5>
                  <p class="abstract">{{item.abstract}}</p>
                  <p class='mui-ellipsis'>
                    <span>{{item.add_time}}</span>
                    <span>点击:{{item.click}}次</span>
                  </p>
              </div>
          </router-link>
      </li>
    </ul>
  </div>
</template>

<<script>
import axios from 'axios'
export default {
   data(){
    return {
			list:[]
		}
  },
  created(){
		this.getNewsList()
	},
  methods: {
		getNewsList(){
			axios.get('api/getnewslist').then(res=>{
        this.list=res.data.message
        // console.log(res)
			})
		}
	}
}
</script>
<style lang="less" scoped>
.mui-table-view{
  li{
    h5{
      font-size: 14px;
      font-weight: 700;
      color: #000;
    }
    .abstract{
      font-size: 14px;
    }
    .mui-ellipsis{
        font-size: 12px;
        color:#226aff;
        display: flex;
        justify-content: space-between;
      }

    }
  }
</style>